<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 6.0.0">


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">



<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/all.min.css" integrity="sha256-2H3fkXt6FEmrReK448mDVGKb3WW2ZZw35gI7vqHOE4Y=" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.1.1/animate.min.css" integrity="sha256-PR7ttpcvz8qrF57fur/yAx1qXMFJeJFiA6pSzWi0OIE=" crossorigin="anonymous">

<script class="next-config" data-name="main" type="application/json">{"hostname":"example.com","root":"/","images":"/images","scheme":"Gemini","version":"8.7.0","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12},"copycode":true,"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"fadeInDown","post_body":"fadeInDown","coll_header":"fadeInLeft","sidebar":"fadeInUp"}},"prism":false,"i18n":{"placeholder":"Searching...","empty":"We didn't find any results for the search: ${query}","hits_time":"${hits} results found in ${time} ms","hits":"${hits} results found"},"path":"/search.xml","localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false}}</script><script src="/js/config.js"></script>
<meta name="description" content="常见技巧输入网址后浏览器的做了什么： 1.DNS域名解析；2.建立TCP连接；3.发送HTTP请求；4.服务器处理请求；5.返回响应结果；6.关闭TCP连接；7.浏览器解析HTML；8.浏览器布局渲染；">
<meta property="og:type" content="article">
<meta property="og:title" content="Web性能优化常见技巧">
<meta property="og:url" content="http://example.com/2022/01/16/26/index.html">
<meta property="og:site_name" content="Xiaolong&#39;s Blog">
<meta property="og:description" content="常见技巧输入网址后浏览器的做了什么： 1.DNS域名解析；2.建立TCP连接；3.发送HTTP请求；4.服务器处理请求；5.返回响应结果；6.关闭TCP连接；7.浏览器解析HTML；8.浏览器布局渲染；">
<meta property="og:locale" content="en_US">
<meta property="og:image" content="https://pic4.zhimg.com/80/v2-9ad723893e550c64a113401c87d4e42b_1440w.jpg">
<meta property="og:image" content="https://pic4.zhimg.com/v2-9ad723893e550c64a113401c87d4e42b_120x160.jpg">
<meta property="article:published_time" content="2022-01-16T03:23:26.000Z">
<meta property="article:modified_time" content="2022-02-16T03:38:12.761Z">
<meta property="article:author" content="Xiaolong">
<meta property="article:tag" content="js">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://pic4.zhimg.com/80/v2-9ad723893e550c64a113401c87d4e42b_1440w.jpg">


<link rel="canonical" href="http://example.com/2022/01/16/26/">



<script class="next-config" data-name="page" type="application/json">{"sidebar":"","isHome":false,"isPost":true,"lang":"en","comments":true,"permalink":"http://example.com/2022/01/16/26/","path":"2022/01/16/26/","title":"Web性能优化常见技巧"}</script>

<script class="next-config" data-name="calendar" type="application/json">""</script>
<title>Web性能优化常见技巧 | Xiaolong's Blog</title>
  




  <noscript>
    <link rel="stylesheet" href="/css/noscript.css">
  </noscript>
</head>

<body itemscope itemtype="http://schema.org/WebPage" class="use-motion">
  <div class="headband"></div>

  <main class="main">
    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="Toggle navigation bar" role="button">
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <i class="logo-line"></i>
      <h1 class="site-title">Xiaolong's Blog</h1>
      <i class="logo-line"></i>
    </a>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
        <i class="fa fa-search fa-fw fa-lg"></i>
    </div>
  </div>
</div>



<nav class="site-nav">
  <ul class="main-menu menu">
        <li class="menu-item menu-item-home"><a href="/" rel="section"><i class="fa fa-home fa-fw"></i>Home</a></li>
        <li class="menu-item menu-item-tags"><a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>Tags</a></li>
        <li class="menu-item menu-item-archives"><a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>Archives</a></li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>Search
        </a>
      </li>
  </ul>
</nav>



  <div class="search-pop-overlay">
    <div class="popup search-popup"><div class="search-header">
  <span class="search-icon">
    <i class="fa fa-search"></i>
  </span>
  <div class="search-input-container">
    <input autocomplete="off" autocapitalize="off" maxlength="80"
           placeholder="Searching..." spellcheck="false"
           type="search" class="search-input">
  </div>
  <span class="popup-btn-close" role="button">
    <i class="fa fa-times-circle"></i>
  </span>
</div>
<div class="search-result-container no-result">
  <div class="search-result-icon">
    <i class="fa fa-spinner fa-pulse fa-5x"></i>
  </div>
</div>

    </div>
  </div>

</div>
        
  
  <div class="toggle sidebar-toggle" role="button">
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
  </div>

  <aside class="sidebar">

    <div class="sidebar-inner sidebar-nav-active sidebar-toc-active">
      <ul class="sidebar-nav">
        <li class="sidebar-nav-toc">
          Table of Contents
        </li>
        <li class="sidebar-nav-overview">
          Overview
        </li>
      </ul>

      <div class="sidebar-panel-container">
        <!--noindex-->
        <div class="post-toc-wrap sidebar-panel">
            <div class="post-toc animated"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%B8%B8%E8%A7%81%E6%8A%80%E5%B7%A7"><span class="nav-number">1.</span> <span class="nav-text">常见技巧</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%BD%93%E8%81%8A%E8%B5%B7%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E6%88%91%E4%BB%AC%E8%A6%81%E8%81%8A%E4%BB%80%E4%B9%88"><span class="nav-number">2.</span> <span class="nav-text">当聊起前端性能优化我们要聊什么</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%83%8C%E6%99%AF"><span class="nav-number">2.1.</span> <span class="nav-text">背景</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%88%91%E4%BB%AC%E8%A6%81%E8%81%8A%E4%BB%80%E4%B9%88"><span class="nav-number">2.2.</span> <span class="nav-text">我们要聊什么</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%80%9D%E8%B7%AF%E4%B8%80%E3%80%81%E4%BB%8E%E6%97%A5%E5%B8%B8%E6%8E%A5%E8%A7%A6%E5%88%B0%E7%9A%84%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD%E5%9C%BA%E6%99%AF%E5%87%BA%E5%8F%91"><span class="nav-number">2.3.</span> <span class="nav-text">思路一、从日常接触到的前端性能场景出发</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%80%9D%E8%B7%AF%E4%BA%8C%E3%80%81%E4%BB%8E%E7%94%9F%E6%B4%BB%E8%A7%92%E5%BA%A6%E8%81%8A%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD"><span class="nav-number">2.4.</span> <span class="nav-text">思路二、从生活角度聊前端性能</span></a></li></ol></li></ol></div>
        </div>
        <!--/noindex-->

        <div class="site-overview-wrap sidebar-panel">
          <div class="site-overview">
            <div class="site-author site-overview-item animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="Xiaolong"
      src="/images/lion.jpg">
  <p class="site-author-name" itemprop="name">Xiaolong</p>
  <div class="site-description" itemprop="description">Never stop learning</div>
</div>
<div class="site-state-wrap site-overview-item animated">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
        <a href="/archives/">
          <span class="site-state-item-count">45</span>
          <span class="site-state-item-name">posts</span>
        </a>
      </div>
      <div class="site-state-item site-state-tags">
          <a href="/tags/">
        <span class="site-state-item-count">17</span>
        <span class="site-state-item-name">tags</span></a>
      </div>
  </nav>
</div>
  <div class="links-of-author site-overview-item animated">
      <span class="links-of-author-item">
        <a href="https://github.com/drwna" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;drwna" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
      </span>
  </div>



          </div>
        </div>
      </div>
        <div class="back-to-top animated" role="button" aria-label="Back to top">
          <i class="fa fa-arrow-up"></i>
          <span>0%</span>
        </div>
    </div>
  </aside>
  <div class="sidebar-dimmer"></div>


    </header>

    
  <div class="reading-progress-bar"></div>

  <a href="https://github.com/Drwna" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>

<noscript>
  <div class="noscript-warning">Theme NexT works best with JavaScript enabled</div>
</noscript>


    <div class="main-inner post posts-expand">


  


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="en">
    <link itemprop="mainEntityOfPage" href="http://example.com/2022/01/16/26/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/lion.jpg">
      <meta itemprop="name" content="Xiaolong">
      <meta itemprop="description" content="Never stop learning">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Xiaolong's Blog">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          Web性能优化常见技巧
        </h1>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">Posted on</span>

      <time title="Created: 2022-01-16 11:23:26" itemprop="dateCreated datePublished" datetime="2022-01-16T11:23:26+08:00">2022-01-16</time>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
        <h1 id="常见技巧"><a href="#常见技巧" class="headerlink" title="常见技巧"></a>常见技巧</h1><p>输入网址后浏览器的做了什么：</p>
<p>1.DNS域名解析；<br>2.建立TCP连接；<br>3.发送HTTP请求；<br>4.服务器处理请求；<br>5.返回响应结果；<br>6.关闭TCP连接；<br>7.浏览器解析HTML；<br>8.浏览器布局渲染；</p>
<span id="more"></span>

<p>思路：尽量优化每一步。</p>
<p><strong>优化：</strong></p>
<ol>
<li><p>DNS 服务</p>
</li>
<li><p>自行配置 host，可以省去 DNS 查询这个步骤。</p>
</li>
<li><p>花钱提高带宽</p>
</li>
<li><p>后端优化 sql 语句的查询速度，使其更快的返回给前端数据.</p>
</li>
<li><p>连接复用，后端设置 keep-alive</p>
</li>
<li><p>后端开启 gzip 代码压缩，浏览器会自动解压缩</p>
</li>
<li><p>先加载 css 再加载 JS，让用户先看到页面，再实现交互。</p>
</li>
<li><p>懒加载，先加载用户看到的第一页，再记载其余的页面。</p>
</li>
<li><p>预加载，比如看小说提前加载下一页</p>
</li>
<li><p>http 缓存 css/js/图片，后端设置缓存时间，使用 hash 值判断需要更新的文件。cache-control</p>
</li>
<li><p>使用2个以上但不超过4个的域名，因为域名限制最大并发请求数(CDN 域名)</p>
</li>
<li><p>cookie-free，将需要 cookie 请求和不需要 cookie 请求的分开多个域名请求，加快不需要 cookie 的请求速度。</p>
</li>
</ol>
<p><a target="_blank" rel="noopener" href="https://zhuanlan.zhihu.com/p/263467359?utm_source=wechat_timeline&utm_medium=social&utm_oi=789275879082696704&utm_campaign=shareopn&wechatShare=1&s_r=0">转载：</a></p>
<h1 id="当聊起前端性能优化我们要聊什么"><a href="#当聊起前端性能优化我们要聊什么" class="headerlink" title="当聊起前端性能优化我们要聊什么"></a>当聊起前端性能优化我们要聊什么</h1><h2 id="背景"><a href="#背景" class="headerlink" title="背景"></a>背景</h2><p>在前端的整个学习生涯中，我们总是能一次次听到“性能”和“体验”这两个词。前端性能优化不仅是前端工程师工作中时刻需要关注的现实问题，也是前端面试中屡屡被问到的点。面试官之所以爱问，是因为偷懒。只需问这一个问题，就能在一定程度考察面试者的知识广度、知识深度、总结能力、表达能力，还能沿着这条线继续问其他问题。</p>
<p>当被突然问到性能这个问题时，大部分人会突然一愣。总觉得有很多要说的东西，但又感觉杂乱无章一下子不知从何说起。经过一番思索，脑子里慢慢翻出早年面试刷题时看到的“雅虎性能优化N条军规”，抓耳挠腮说上七八条。面试官面无表情的问了句“还有吗？”，此刻又不得不把脑仁像挤海绵一样疯狂压榨，再多滴出两三条似是而非的油水。心里面满是苦恼，抱怨自己的记忆力不够好。</p>
<p>其实就算是全背下来一口气说个几十条，面试官也不见得多满意。原因之一是条目太多没有主次听着容易让人烦，面试官自己都记不住你说了什么。二是这种方式的回答明显给人一种死记硬背做题家的感觉。（面试官真欠抽）</p>
<h2 id="我们要聊什么"><a href="#我们要聊什么" class="headerlink" title="我们要聊什么"></a>我们要聊什么</h2><p>回答性能问题有两个思路。顺着这两个思路，不需要过多记忆就能自然而然的并且“很有见地”的回答十几条甚至几十条优化方案，当然前提是这些优化方案你平时真的用过。</p>
<h2 id="思路一、从日常接触到的前端性能场景出发"><a href="#思路一、从日常接触到的前端性能场景出发" class="headerlink" title="思路一、从日常接触到的前端性能场景出发"></a><strong>思路一、从日常接触到的前端性能场景出发</strong></h2><p>性能瓶颈主要出现在三个场景</p>
<ol>
<li>在开发时每次修改代码打包需要几分钟，太慢（<strong>开发构建阶段</strong>）</li>
<li>打开网站，等了几十秒才看到页面，太慢（<strong>资源加载</strong>和<strong>页面渲染</strong>阶段）</li>
<li>页面展现后，页面上动画不流畅。滚动页面或者拖拽元素卡顿感严重，甚至页面会崩溃（<strong>操作体验</strong>阶段）</li>
</ol>
<p><strong>一、开发构建阶段</strong>（常见问题：如何让Webpack打包更快）</p>
<ul>
<li> 并发：使用多进程打包</li>
<li> 缓存：打包时利用缓存</li>
<li> 打包量要小：缩小文件搜索范围，减小不必要的编译工作</li>
</ul>
<p><strong>二、资源加载阶段</strong></p>
<p>核心思路是：传输量要小、距离要近、并行传输、资源复用、预先加载。</p>
<p>传输量要小</p>
<ul>
<li> 构建时HTML压缩</li>
<li> 构建时CSS压缩合并</li>
<li> 构建时JavaScript压缩合并</li>
<li> 构建时图片的压缩</li>
<li> 使用SVG sprite 或者字体图标代替图片ICON</li>
<li> 服务端开启Gzip，数据在传输之前再次压缩</li>
<li> 构建时是使用TreeShaking，减少不必要的代码引入</li>
<li> 单页应用路由懒加载，减少首次加载的资源体积</li>
<li> 组件懒加载，减少首次加载的资源体积</li>
<li> 图片懒加载，减少首次加载的资源体积</li>
</ul>
<p>距离要近</p>
<ul>
<li> 静态资源部署到CDN</li>
</ul>
<p>并行传输</p>
<ul>
<li> 升级到 HTTP2.0 （常见问题：HTTP2.0相比HTTP1.x做了哪些升级？多路复用；二进制分帧；服务端推送；数据流优先级；头部压缩）</li>
</ul>
<p>资源复用</p>
<ul>
<li> 服务端配置静态资源缓存（常见问题：HTTP缓存策略？Cache-Control？keep-alive？304？ETag？）</li>
<li> 打包时分包复用</li>
</ul>
<p>预先加载</p>
<ul>
<li> 浏览器在空闲的时间偷偷预先加载， <link rel="prefetch" href="url"></li>
</ul>
<p><strong>三、页面渲染阶段</strong></p>
<ul>
<li> CSS在上、JS在下</li>
<li> 加载CSS推荐用 link 少用 @import</li>
<li> 不重要的外置引入的JS使用defer或者async属性异步加载</li>
</ul>
<p><strong>四、操作体验阶段</strong></p>
<ul>
<li><p>动画流畅</p>
</li>
<li><ul>
<li> 尽量使用 transition 和 animation来实现CSS动画<strong>，</strong>而不是JS实现动画（运行在主线程对动画的流畅度有影响）</li>
<li> 动画尽量多用transfrom 和 opacity （无需重绘和回流，性能最好）</li>
<li> translateZ/translate3d 开启硬件加速 </li>
<li> JS动画使用requestAnimationFrame少用setInterval</li>
</ul>
</li>
<li><p>滚动/移动/操作流畅</p>
</li>
<li><ul>
<li> DOM增删操作要少(虚拟长列表、DOM Diff)</li>
<li> 高频操作使用防抖和节流</li>
</ul>
</li>
<li><p>密集型计算</p>
</li>
<li><ul>
<li> 计算密集型操作可以交给WebWorker并发处理</li>
</ul>
</li>
</ul>
<p><img src="https://pic4.zhimg.com/80/v2-9ad723893e550c64a113401c87d4e42b_1440w.jpg" alt="img">来自若愚@饥人谷</p>
<h2 id="思路二、从生活角度聊前端性能"><a href="#思路二、从生活角度聊前端性能" class="headerlink" title="思路二、从生活角度聊前端性能"></a>思路二、从生活角度聊前端性能</h2><p>假设你是公司的CTO，现在有一个产品需要在尽可能短的时间内上线，在现有团队不加班不996的前提下如何做？方案无外乎是：</p>
<ol>
<li>压缩需求，迭代开发——压缩</li>
<li>多用旧轮子(代码、方案、架构)少造新轮子——缓存</li>
<li>增加人手——并发</li>
</ol>
<p>和前端性能优化做对应</p>
<ul>
<li>压缩需求，迭代开发：静态资源的压缩合并、Gzip、各种懒加载、开发打包时的缩小文件搜索范围</li>
<li>多用旧轮子(代码、方案、架构)少造新轮子：资源请求时HTTP缓存、开发打包时配置使用缓存、打包时配置分包复用</li>
<li>增加人手：资源请求时使用HTTP2实现并发请求、开发打包时配置使用并发能力、WebWorker</li>
</ul>
<p>从以上两个思路入手，对于有经验的你来说自然才思泉涌，轻轻松松让自己和面试官兴奋起来，甚至能在一定程度上左右后续的提问。</p>
<p>提到性能，大脑里需要浮现6字箴言：<strong>压缩</strong>、<strong>缓存</strong>、<strong>并发</strong>。后面的都交给小脑自由发挥吧。</p>
<p><a href="https://link.zhihu.com/?target=https://www.yuque.com/hvvsva/xcxoqg/gugadx">一次性弄懂性能优化</a></p>
<p><a href="https://link.zhihu.com/?target=https://www.yuque.com/hvvsva/xcxoqg/gugadx">www.yuque.com/hvvsva/xcxoqg/gugadx<img src="https://pic4.zhimg.com/v2-9ad723893e550c64a113401c87d4e42b_120x160.jpg" alt="img"></a></p>

    </div>

    
    
    

    <footer class="post-footer">
          <div class="post-tags">
              <a href="/tags/js/" rel="tag"><i class="fa fa-tag"></i> js</a>
          </div>

        

          <div class="post-nav">
            <div class="post-nav-item">
                <a href="/2021/12/11/14/" rel="prev" title="react hooks 详解">
                  <i class="fa fa-chevron-left"></i> react hooks 详解
                </a>
            </div>
            <div class="post-nav-item">
                <a href="/2022/01/17/52/" rel="next" title="随手记 Vue 总结">
                  随手记 Vue 总结 <i class="fa fa-chevron-right"></i>
                </a>
            </div>
          </div>
    </footer>
  </article>
</div>






</div>
  </main>

  <footer class="footer">
    <div class="footer-inner">


<div class="copyright">
  &copy; 2021 – 
  <span itemprop="copyrightYear">2023</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">Xiaolong</span>
</div>

    </div>
  </footer>

  
  <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js" integrity="sha256-XL2inqUJaslATFnHdJOi9GfQ60on8Wx1C2H8DYiN1xY=" crossorigin="anonymous"></script>
<script src="/js/comments.js"></script><script src="/js/utils.js"></script><script src="/js/motion.js"></script><script src="/js/next-boot.js"></script>

  
<script src="/js/third-party/search/local-search.js"></script>




  





</body>
</html>
